<template>
    <div class="tags">
        <el-tag v-for="(tag, index) in tags" :key="tag.name" :closable="tag.name !== 'home'"
            :effect="route.name === tag.name ? 'dark' : 'plain'" @click="handleMenu(tag)"
            @close="handleClose(tag, index)">
            {{ tag.label }}
        </el-tag>
    </div>
</template>

<script setup lang="js">
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAllDataStore } from '../store';
const store = useAllDataStore()
const tags = computed(() => store.state.tags)
const route = useRoute()
const router = useRouter()
//点击tag
const handleMenu = (tag) => {
    router.push(tag.name)//跳转至对应页面
    // store.selectMenu(tag)//调整tags
}
//点击关闭tag
const handleClose = (tag, index) => {
    store.updateTags(tag)//删除该tag（注意：此操作后tags已经少了一个tag了）
    // 如果将要点击关闭的tag不是对应当前页面-----则不需要有操作
    if (tag.name !== route.name) return
    if (index === store.state.tags.length) {
        // 如果将要点击关闭的tag是tags里的最后一个-----则跳转到前一个tag对应的页面（即跳转至当前页面最后一个tag）
        // store.selectMenu(tags.value[index - 1])
        router.push(tags.value[index - 1].name)
    } else {
        // 如果将要点击关闭的tag不是tags里的最后一个-----则跳转到下一个tag（即跳转至当前页面最后一个tag）
        // store.selectMenu(tags.value[index])
        router.push(tags.value[index].name)
    }
}
</script>

<style scoped lang="less">
.tags {
    margin: 10px 0 0 20px;
}

.el-tag {
    margin-right: 10px;
}
</style>
